import {AfterViewChecked, AfterViewInit, Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Editor, Settings} from "tinymce";
import {CustomSelection} from "../../plugins/custom-selection";
import {PanelComponentCollection} from "../../plugins/panel/panel-component-collection";
import {PanelComponentBar} from "../../plugins/panel/panel-component-bar";
import {PanelComponentLabel} from "../../plugins/panel/panel-component-label";
import {PanelComponentGrid} from "../../plugins/panel/panel-component-grid";
import {custom_select_flag, custom_select_flag_value, CustomSelectionPlus} from "../../plugins/custom-selection-plus";

@Component({
  selector: 'app-tiny-demo-one-editor',
  templateUrl: './tiny-demo-one-editor.component.html',
  styleUrls: ['./tiny-demo-one-editor.component.less']
})
export class TinyDemoOneEditorComponent implements OnInit, AfterViewChecked, AfterViewInit, OnDestroy {
  @Input() elementId: String;

  private editor: Editor;

  content: string;

  private contentKey = 'content-key';

  private customAttr = {};

  private settings = {
    base_url: '/tinymce',
    language: 'zh_CN',
    suffix: '',
    // statusbar: false,
    // readonly: true,
    language_url: '/assets/tinymce/language/zh_CN.js',
    plugins: 'customSelectionPlus emoticons customSelection panelComponentCollection panelComponentBar panelComponentLabel panelComponentGrid noneditable',
    toolbar: 'customSelectionPlus panelComponentCollection emoticons customSelection panelComponentBar panelComponentLabel panelComponentGrid noneditable',
    menubar: 'customSelectionPlus panelComponentCollection panelComponentGrid',
    extended_valid_elements: 'select[autocomplete|autofocus|disabled|form|multiple|name|required|size|custom-select-plus]',
    setup: (edtor: Editor) => {
      tinymce.setActive(edtor);
      this.editor = edtor;
      new PanelComponentCollection().creat(edtor);
      new CustomSelection().creat(edtor);
      new PanelComponentBar().creat(edtor);
      new PanelComponentLabel().creat(edtor);
      new PanelComponentGrid().creat(edtor);
      new CustomSelectionPlus().creat(edtor);
    }
  } as Settings;

  constructor() {
  }

  ngOnInit() {
    // todo 这里肯定不对

    console.log(this.settings);
    setTimeout(() => {
      this.settings['selector'] = `#${this.elementId}`;
      tinymce.init(this.settings).then(() => {
        this.editor.setContent(localStorage.getItem(this.contentKey));
      })
    }, 1)
  }

  ngAfterViewChecked(): void {

  }

  ngAfterViewInit(): void {

  }

  ngOnDestroy(): void {
    this.editor.destroy()
  }

  save() {
    this.content = this.editor.getContent();
    localStorage.setItem(this.contentKey, this.content);
  }
}
